<html>

<head>
    <link href="./index.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="title-row">
        <span>ImagePacks2路径: </span>
        <input id="ipkPath" name="path" value="" placeholder="选择或拖入一个PVF文件" id="path" />
        <button id="choose_btn">选择路径</button>
        <button id="cache_btn">建立缓存</button>
        <button id="test_btn">检查缓存</button>
        <button id="all_btn">查看全部</button>
    </div>

    <hr>

    <div class="search-row">
        <span>npk查询</span>
        <input id="npkPath" name="npkPath" onchange="searchNpkInputChange(this)" placeholder="输入npk名字,支持模糊查询" />
        <button id="npk-search-btn">搜索</button>
    </div>
    <hr>
    <div class="search-row">
        <span>img查询</span>
        <input id="imgPath" name="imgPath" onchange="searchImgInputChange(this)" placeholder="输入img路径或名字,支持模糊查询" />
        <button id="img-search-btn">搜索</button>

        <div class="bgColorDiv">
            <div id="bgColorText" class="bg-color-label">
                <div class="innerColor"></div>
                <div class="innerText">背景填充色</div>
            </div>
            <select id="bgColorSelect" class="bg-color-select" value="0" onchange="selectBgColor(this)">
                <option value="0" class="bgColorOption" style="background: gray;">透</option>
                <option value="1" class="bgColorOption" style="background: black;"></option>
                <option value="2" class="bgColorOption" style="background: gray;"></option>
                <option value="3" class="bgColorOption" style="background: white;"></option>
                <option value="4" class="bgColorOption" style="background: red;"></option>
                <option value="5" class="bgColorOption" style="background: blue;"></option>
                <option value="6" class="bgColorOption" style="background: green;"></option>
                <option value="7" class="bgColorOption" style="background: yellow;"></option>
                <option value="8" class="bgColorOption" style="background: purple;"></option>
                <option value="9" class="bgColorOption" style="background: aqua;"></option>
            </select>
        </div>
    </div>
    <hr>
    <div class="table-row">
        <label id="table-page">查询结果: </label>
        <table class="search-table" id="search-table">
            <thead>
                <tr>
                    <th>NPK路径</th>
                    <th>IMG路径</th>
                </tr>
            </thead>
            <tbody>
                <!-- 数据行格式 -->
                <!-- <tr class="row"  data-id="${data.id}" id="uuid-row">
                    <td><span>${npkPath}</span><button class="exNpk" onclick="exportNpk(this)">全部导出</button><button class="explorer" onclick="tableExplorer(this)">定位</button></td>
                    <td><span>${imgPath}</span><button class="exImg" onclick="exportImg(this)">导出IMG</button><button class="preview" onclick="tableView(this)">预览</button></td>
                </tr> -->
                <!-- 预览行格式 -->
                <!-- <tr class="preview" ref="${dataid}" id="uuid" >
                    <td colspan="2">
                        <div class="preview-div">
                            <label>${data.index}</label>
                            <img src="${data.base64}" onload="previewOnload(this)"></img>
                        </div>
                    </td>
                </tr> -->
            </tbody>
        </table>
    </div>


    <div class="cache-waite hidden">
        1123123
    </div>

    <script src="./index.js"></script>
</body>

</html>